<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>账号登录入口</title>
		<style>
			body{
				background: black;
				
				
			}
			#container{
				width: 25%;
				margin-left: 40%;
				margin-top: 100px;
			}
			#login{
				width: 300px;

				background-color: ghostwhite;

				align-items: center;
				overflow: hidden;
			}
			#sb{
				width: 70%;
				text-align: center;
				margin: 20px 15%;
				padding-bottom:5px;
				border-bottom: 0.5px solid rgb(10,10,10);
			}
			#title{
				font-size:20px;
				color: rgb(10,10,10);
			}
			.hint {
				font-size: 12px;
				color: red;
				width: 70%;
				margin-left:15%;
        	}
			#mid{
				width: 70%;
				text-align: center;
				margin: 20px 15%;
			}
			
			.inp{
				width: 95%;
				height: 1.8em;
				font-size: 11px;
				color: grey;
				padding-left: 0.5em;
				margin-bottom: 1em;
			}
			#button{
				width: 100%;
				font-size: 10px;
				color: white;
				height: 3em;
				background-color:#428bca;
				border-width: 0;
				margin-top: 20px;
			}
			#button:hover{
				border: 3px solid #6fb3e0;
			}
			#bottom{
				width: 100%;
				height: 20%;
				
				text-align: center;
				font: 12px/2em "微软雅黑" ;
				background-color: #5090c1;
				
			}
			#bottom_a{
				color: white;
				height: 35px;
				line-height: 35px;
				
			}
			#bottom_a:link{
				text-decoration: none;
				
			}
			#bottom_a:hover{
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="login">
				<div id="sb">
					<span id="title">
						登录入口
					</span>
				</div>
				<p class="hint">{{ hint }}</p>
				<div id="mid">
					<form id="login_form" action="/login/?backurl={{backurl}}" method="post">
						{% csrf_token %}
						<input class="inp" type="text" name="username" placeholder="账号"/><br />
						<input class="inp" type="password" name="password" placeholder="密码"/><br />
						<input class="inp" type="text" name="captcha" placeholder="验证码"/><br />
						<img id="code" src="/captcha/" height="33">
						<input id="button" type="submit" name="login" value="登录" />
						
					</form>
				</div>
				<div id="bottom">
					<a id="bottom_a" href="/subjects/">首页</a>
				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script>
    $(() => {
        $('#code').on('click', (evt) => {
            $(evt.target).attr('src', '/captcha/?' + Math.random())
        })
    })
    </script>
</html>
